<template>
  <view class="com-tab_bar">
    <view class="tab_bar">
      <template v-for="(item, index) in list" :key="index">
        <view class="bar" @click="onChecked(index)">
          <text :class="{ checked: checked == index }">{{ item.name }}</text>
        </view>
      </template>
    </view>
    <template v-for="(item, index) in list" :key="index">
      <view v-if="checked == index" class="tab_content">
        <scroll-view class="tab_item_scroll" scroll-y>
          <view class="tab_content_item">
            <view v-for="i in 100" :key="i"> {{ item.name }}{{ i }} </view>
          </view>
        </scroll-view>
      </view>
    </template>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

type IList = {
  id: string | number
  name: string
}

const props = withDefaults(
  defineProps<{
    list?: IList[]
    defaultChecked?: number
  }>(),
  {
    defaultChecked: 0
  }
)
const checked = ref(props.defaultChecked || 0)

function onChecked(index: number) {
  if (checked.value != index) {
    checked.value = index
  }
}
</script>

<style lang="scss" scoped>
.com-tab_bar {
  .tab_bar {
    width: 100%;
    height: 100rpx;
    display: flex;
    align-items: center;

    .bar {
      flex: 1;
      text-align: center;

      text {
        padding: 20rpx 0;
        transition: border-bottom-color 300ms;
        border-bottom: 5rpx solid var(--color-background);
      }

      .checked {
        border-bottom-color: var(--vt-c-check);
      }
    }
  }

  .tab_content {
    margin-top: 12rpx;

    .tab_item_scroll {
      width: 100%;
      height: calc(100vh - 100rpx);
    }

    .tab_content_item {
      width: 100%;
      padding: 0 var(--vt-c-padding-20) var(--vt-c-padding-10);
    }
  }
}
</style>
